<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background-color: #eee;
        }

        .cart {
            width: 1100px;
            margin: auto;
            background-color: #fff;
            text-align: center;
            line-height: 50px;
        }

        .cart-hd {
            display: flex;
        }

        .cart-hd p {
            flex: 1;
            height: 50px;
            border-bottom: 1px solid #000;
        }

        .cart-bd li {
            display: flex;
        }

        .cart-bd p {
            flex: 1;
            height: 50px;
            border-bottom: 1px solid #000;
        }

        .cart-bd p:nth-child(3),
        .cart-hd p:nth-child(3) {
            flex: 2;
            padding: 0 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: left;
        }

        .cart-bd img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }

        .num {
            width: 50px;
            vertical-align: middle;
        }

        .add,
        .reduce {
            width: 20px;
            height: 20px;
            text-align: center;
            display: inline-block;
            background-color: orange;
            line-height: 20px;
            vertical-align: middle;
        }

        .off {
            background-color: #ddd;
        }

        .empty {
            display: none;
        }
    </style>
</head>

<body>

    <div class="cart">
        <div class="cart-hd">
            <p>
                <input type="checkbox" class="checkAll">全选
            </p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
        </div>
        <div class="cart-bd">
            <ul>
                <li>
                    <p>1</p>
                    <p>2</p>
                    <p>少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所</p>
                    <p>4</p>
                    <p>5</p>
                    <p>6</p>
                    <p>7</p>
                </li>
            </ul>
        </div>
        <div class="cart-ft">
            <p class="delAll">批量删除</p>
            <p>数量小计：<strong class="total">0</strong></p>
            <p>价格小计: <strong class="money">0</strong></p>
        </div>
    </div>


    <h1 class="empty">购物车空空如也，<a href="">请继续挑选</a></h1>


    <script src="../js/ajax.js"></script>
    <script>



        //获取元素
        const oDiv = document.querySelector('.cart');
        const oUl = oDiv.querySelector('ul');

        const username = localStorage.getItem('LOGIN_USER');

        if (username) {
            // 请求数据
            ajax({
                path: `../php/showCart.php?username=${username}`,
                success: res => {
                    console.log(res);
                    const { status, data } = res;
                    if (status) {
                        // 动态生成 购物车列表
                        var html = '';
                        data.forEach(function (v, i) {

                            html += `
                                <li>
                                    <p>
                                        <input type="checkbox" class="one">
                                    </p>
                                    <p><img src="${v.goods_img}" alt=""></p>
                                    <p>${v.goods_title}</p>
                                    <p>${v.goods_price}</p>
                                    <p>
                                        <span class="reduce ${v.num == 1 ? 'off' : ''}" data-id="${v.goods_id}">-</span>
                                        <input class="num" type="text" value="${v.num}">
                                        <span class="add" data-id="${v.goods_id}">+</span>
                                    </p>
                                    <p class="priceAll">${v.goods_price * v.num}</p>
                                    <p class="del">x</p>
                                </li>
                            `;
                        })

                        oUl.innerHTML = html;
                    } else {
                        alert('购物车空空如也');
                        // 商量列表页
                    }
                }
            })
        } else {
            alert('请先登录');
            // 去登录页面
        }




        // 事件委托
        oDiv.onclick = function (e) {
            e = e || event;
            const target = e.target;
            // 数量加 --- 加入购物车
            if (target.className === 'add') {
                const id = target.getAttribute('data-id');

                ajax({
                    path: `../php/addToCart.php?username=${username}&num=1&id=${id}`,
                    success: res => {
                        console.log(res);
                        const { status, msg } = res;
                        if (status) {
                            // 数量改变
                            target.previousElementSibling.value++;
                            // 小计
                        } else {
                            alert(msg);
                        }
                    }

                })
                return;
            }

            // 数量减    数量写成-1
            if (target.classList.contains('reduce')) {

                // 判断能不能减

                // console.log(222);
                const id = target.getAttribute('data-id');
                console.log(id);
                ajax({
                    path: `../php/addToCart.php?username=${username}&num=-1&id=${id}`,
                    success: res => {
                        console.log(res);
                        const { status, msg } = res;
                        if (status) {
                            // 数量改变
                            target.nextElementSibling.value--;
                            // 小计
                        } else {
                            alert(msg);
                        }
                    }

                })
                return;
            }
        }




    </script>

</body>

</html>